<template>
       <div class="app1">
        <h4>父组件1</h4>
        <h4 v-show="toy">子给的玩具：{{ toy }}</h4>
        <!-- <button @click="test($event)">点我</button> -->

        <!--给子组件绑定自定义事件    abc事件名  xyz事件回调 -->
        <zdingyi2 @abc="xyz"/>
       </div>
</template>
    
<script setup lang='ts'>
import { ref } from 'vue';
import zdingyi2 from './zdingyi2.vue';

let toy = ref('')

// function test(x:Event) {
//     // 打印的是事件对象
//         console.log(x);
//     }

function xyz(value:string) {
    console.log('xyz',value);
    toy.value = value
}
</script>
    
<style scoped>
    .app1{
        width: 80%;
        padding: 20px;
        background-color: bisque;
        font-size: 17px;
        border-radius: 5px;
    }
</style>